<template>
	<view class="">
		 
		
	</view>
</template>

<script>
	export default {
		name: "gt-table-list",
		model: {
			prop: 'template',
			event: 'change'
		},
		props: {
			template: {}
		},
		data() {
			return {
				searchForm: {},
				batchSelectIndexList: [],
				pageLimitList: [{
						key: 20,
						val: '20条'
					},
					{
						key: 30,
						val: '30条'
					},
					{
						key: 50,
						val: '50条'
					},
					{
						key: 100,
						val: '100条'
					},
				],
				searchPage: '',
				formTemplate: '',
				formData: {},
			}
		},
		created() {
			//获取选择列表
			this.getSelectListData();
			//获取数据列表
			this.getListData();
		},
		computed: {
			selectAllCheckbox() {
				if (this.template.table.list && this.template.table.list.length != 0 && this.batchSelectIndexList && this
					.batchSelectIndexList.length > 0 && this
					.batchSelectIndexList
					.length == this.template.table.list.length) {
					return true;
				}
				return false;
			}
		},
		watch: {
			template(newData) {
				// console.log(newData);
			}
		},
		methods: {
			formSubmit(e) {
				if (e.response && e.response.msg) {
					this.getListData();
					this.$refs.popup.close();
				}
			},
			buttonGroup(item, data) {
				if (item.click) {
					let pages = getCurrentPages();
					let page = pages[pages.length - 1];
					item.click(item, data, page);
				}else if (item.popup) {
					if (item.popup.form) {
						if (typeof item.popup.form == 'string' && this.template.form[item.popup.form]) {
							item.popup.form = this.template.form[item.popup.form];
						}
						if (item.url) {
							item.popup.form.url = item.url;
						}
						if (!item.popup.form.url) {
							console.log('请求地址为空！');
							return;
						}
						if (data) {
							let formData = {};
							for (let i in item.popup.form.child) {
								let row = item.popup.form.child[i]
								if(row.field && data[row.field] && row.type == 'json' && row.child){
									formData[row.field] = JSON.parse(data[row.field]);
									console.log(formData[row.field]);
								}if(row.field && data[row.field] && row.type == 'json_array' && row.child){
									formData[row.field] = JSON.parse(data[row.field]);
									console.log(formData[row.field]);
								}else if (row.field && data[row.field]) {
									formData[row.field] = data[row.field];
								} else {
									formData[row.field] = '';
								}
							}
							let urlParams = '';
							if (item.urlParams) {
								for (let i in item.urlParams) {
									let field = item.urlParams[i];
									if (!data[field]) {
										console.log('请求参数值不存在');
										return;
									} else {
										urlParams += urlParams ? '&' : '';
										urlParams += field + '=' + data[field];
									}
								}
							}
							item.popup.form.url += urlParams ? '?' + urlParams : '';
							this.formTemplate = item.popup;
							this.formData = formData;
						} else {
							let formData = {};
							for (let i in item.popup.form.child) {
								let row = item.popup.form.child[i]
								if(row.field && row.type == 'json'){
									let tempJson = {};
									for(let i in row.child){
										if(row.child[i].field){
											tempJson[row.child[i].field] = '';
										}
										
									}
									formData[row.field] = tempJson;
								}else if(row.field && row.type == 'json_array'){
									let tempJson = {};
									let tempJsonArr = [];
									for(let i in row.child){
										if(row.child[i].field){
											tempJson[row.child[i].field] = '';
										}
									}
									tempJsonArr.push(tempJson);
									// console.log(tempJsonArr);
									formData[row.field] = tempJsonArr;
								}else if(row.field){
									formData[row.field] = '';
								}
							}
							this.formTemplate = item.popup;
							this.formData = formData;

						}
						// console.log(this.formData);
						this.$refs.popup.open();
					}

				}
			},
			closePopup() {
				this.$refs.popup.close();
			},
			searchFormSubmit(e) {
				console.log(e);
				this.searchForm = e.data;
				this.getListData({
					page: 1
				});
			},
			//获取选择列表
			getSelectListData() {
				let _this = this;
				if (this.template.selectListUrl) {
					for (let i in this.template.selectListUrl) {
						this.$get({
							url: this.template.selectListUrl[i],
							afterFun(resp) {
								if (resp) {
									let template = _this.$tools.assginData(_this.template);
									if (!template.selectList) {
										template.selectList = {};
									}
									template.selectList[i] = resp;
									_this.$emit('change', template)
								}
							},
						});
					}
				}
			},
			//获取数据列表
			getListData(params) {
				let _this = this;
				// console.log('getListData');
				let page = params && params.page || (this.template.pageInfo.page ? this.template.pageInfo.page :
					1);
				let limit = params && params.limit || (this.template.pageInfo.limit || 10);
				this.$get({
					url: _this.template.table.listUrl,
					data: {
						page: page,
						limit: limit,
						...this.searchForm
					},
					afterFun(resp) {
						let template = _this.$tools.assginData(_this.template);
						if (resp.list) {
							template.list = resp.list
						}
						if (resp.pageInfo) {
							template.pageInfo = resp.pageInfo;
						}
						_this.$emit('change', template)
						return resp.list;
					},
				});
			},
			selectCheckBox(index) {
				let key = this.batchSelectIndexList.indexOf(index);
				if (key == -1) {
					this.batchSelectIndexList.push(index);
				} else {
					this.batchSelectIndexList.splice(key, 1);
				}
				this.$emit('changeSelection', this.batchSelectIndexList)
			},
			selectParentCheckBox() {
				let template = this.template;
				if (template.list.length != 0 && this.batchSelectIndexList.length == template.list.length) {
					//取消
					this.batchSelectIndexList = [];
				} else {
					//选中
					let list = [];
					for (let i in template.list) {
						list.push(parseInt(i));
					}
					this.batchSelectIndexList = [];
					this.batchSelectIndexList = list;
				}
				this.$emit('changeSelection', this.batchSelectIndexList)
			},
			//分页条数
			changePageLimit(e) {
				this.getListData({
					page: 1,
					limit: e || 10
				});
			},
			//分页页数
			pagination(e) {
				this.getListData({
					page: e.current
				});
			},
			//分页跳转
			skipPage() {
				this.getListData({
					page: parseInt(this.searchPage)
				});
				this.searchPage = '';
			},
			batch(item) {
				// console.log(item);
				// console.log(this.batchSelectIndexList);
				let _this = this;
				// for(let i in this.template.list){
				if (!item.url) {
					console.log('无 url 参数');
					return;
				}
				if (!item.field) {
					console.log('无 field 参数');
					return;
				}
				let params = '';
				for (let i in this.batchSelectIndexList) {
					let index = this.batchSelectIndexList[i];
					let row = this.template.list[index];
					if (row[item.field]) {
						params += params ? ',' : '';
						params += row[item.field];
					}
				}
				uni.showModal({
					title: '警告',
					content: this.confirmText,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.$post({
								url: item.url + '?' + item.field + '=' + params,
								afterFun(r) {
									if (r.msg) {
										_this.batchSelectIndexList = [];
										_this.getListData();
									}
									_this.$emit('batchCallBack', {
										response: r
									})
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			rowCallBack(e) {
				if (e.msg) {
					this.batchSelectIndexList = []
					this.$emit('rowCallBack')
				}
			},
			update(label, row) {
				let obj = {
					label: label,
					row: row
				}
				this.$emit('update', obj)
			}
		}
	}
</script>

<style>
	.gt-popup-close {
		width: 24px;
		height: 24px;
		position: absolute;
		right: 15px;
		top: 15px;
		text-align: center;
		cursor: pointer;
	}


	.popup-title {
		line-height: 40px;
		font-size: 22px;
		padding: 10px 20px;
		border-bottom: 1px solid #eeeeee;
	}

	.gt-table-list-container {
		padding: 0 30px 30px 30px;
	}

	.gt-table {
		width: 100%;
		max-width: 100%;
		background-color: #fff;
		font-size: 14px;
		color: #606266;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		border-collapse: collapse;
		border-spacing: 16px;
		color: #606266;
		text-align: left;
	}

	/* 线状网格 */
	.gt-table-line td {
		// border-top: none !important;
		// border-right: none !important;
		// border-left: none !important;
	}

	.gt-table thead {
		font-weight: 900;
		color: #858585;
	}

	.gt-table-tr:hover {
		background-color: #f9f9f9;
	}

	.gt-table tr {
		display: table-row;
		vertical-align: inherit;
		border-color: inherit;
	}

	.gt-table td {
		padding: 12px 15px;
	}

	.gt-table tbody td {
		border-top: 1px solid #eeeeee;
	}

	.showTrChild,
	.showTrChild td,
	.showTrChild .td-content {
		min-height: 50px;
		animation: showTr .3s;
	}

	@keyframes showTr {
		form: {
			height: 0 !important;
			padding: 0 !important;
			overflow: hidden !important;
			border-top: none !important;
		}

		to: {
			min-height: 50px;
			background-color: aqua;
		}
	}

	.hideTrChild,
	.hideTrChild td,
	.hideTrChild .td-content {
		height: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		border-top: none !important;
		animation: hideTr .3s;
	}

	@keyframes hideTr {
		form: {
			min-height: 100px;
		}

		to: {
			height: 0 !important;
			padding: 0 !important;
			overflow: hidden !important;
			border-top: none !important;
		}
	}

	button {
		border: none;
	}

	.page--active {
		background-color: black;
	}

	.page-limit {
		width: 80px;
		height: 28px;
	}
</style>
